<!-- ERC-备件管理-备件出库页面 -->
<template>
  <div>
    <div v-show="!isView" class="equip-wrap-common">
      <TypeTree v-model:typeCode="typeCode" />
      <!-- 右侧整体功能 -->
      <div class="equip-table-wrap">
        <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="12">
            <px-col :span="5">
              <px-form-item label="保养工单单号">
                <px-input
                  v-model="queryParams.code"
                  placeholder="请输入保养工单单号"
                  autocomplete="off"
                  maxlength="50"
                  clearable
                  @blur="queryParams.code = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="保养名称">
                <px-input
                  v-model="queryParams.planName"
                  clearable
                  placeholder="请输入保养名称"
                  autocomplete="off"
                  maxlength="50"
                  @blur="queryParams.planName = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="地块" prop="facCode">
                <px-select v-model="queryParams.facCode" placeholder="请选择地块" clearable filterable>
                  <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="工单状态">
                <px-select v-model="queryParams.taskStatus" placeholder="请选择工单状态" filterable clearable>
                  <px-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>
            <px-col :span="4">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </px-col>
          </px-row>
        </px-form>
        <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 264px)" border>
          <px-table-column type="index" label="序号" min-width="50" align="center" fixed="left" />
          <px-table-column label="保养工单单号" min-width="140">
            <template #default="scope">
              <span v-if="isHasPermission('ERC_EPM_ORDER_DETAIL')" style="color: #3b82f6; cursor: pointer" @click="handleView(scope.row)">
                {{ scope.row.code }}
              </span>
              <span v-else>{{ scope.row.code }}</span>
            </template>
          </px-table-column>
          <px-table-column label="保养名称" min-width="140">
            <template #default="scope">{{ scope?.row?.planDTO?.name }}</template>
          </px-table-column>
          <px-table-column label="工单状态" min-width="80">
            <template #default="scope">
              <px-tag
                effect="plain"
                :style="{
                  color: `${fontColorList[scope.row.taskStatus]}`,
                  border: `1px solid ${tagBorderColorList[scope.row.taskStatus]}`,
                  backgroundColor: `${tagBgColorList[scope.row.taskStatus]}`
                }"
              >
                {{ scope.row.taskStatusName }}
              </px-tag>
            </template>
          </px-table-column>
          <px-table-column label="保养负责人" min-width="120" showOverflowTooltip>
            <template #default="scope">{{ scope?.row?.planDTO?.userName }}</template>
          </px-table-column>
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">
              <span>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
            </template>
          </px-table-column>
          <px-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default="scope">
              <px-tooltip v-if="scope.row.taskStatus === '1' && scope?.row?.planDTO?.userId === userInfo.userId" content="工单派发" placement="top">
                <px-button v-has="'ERC_EPM_ORDER_ALLOCATE'" link type="primary" icon="DocumentChecked" @click="handleAllocate(scope.row)" />
              </px-tooltip>
              <px-tooltip v-if="scope.row.taskStatus === '2' && scope.row.planDTO.userId === userInfo.userId" content="上传合格证" placement="top">
                <px-button v-has="'ERC_EPM_ORDER_EDIT'" link type="primary" icon="FolderAdd" @click="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip content="详情" placement="top">
                <px-button v-has="'ERC_EPM_ORDER_DETAIL'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
        />
      </div>
      <AllocateDialog :code="code" :visible="isShow" @closeDialog="isShow = false" @queryTable="queryTable" />
      <UploadFile :code="code" :visible="isUploadShow" @closeDialog="isUploadShow = false" @queryTable="queryTable" />
    </div>
    <OrderDetail :isView="isView" :userInfo="userInfo" :typeCode="typeCode" :code="code" @backMainPage="isView = false" @queryTable="queryTable" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ERC_EPM_ORDER"
});
import { queryDictData } from "@/api/common";
import { queryOrderList } from "@/api/erc/epm";
import { isHasPermission } from "@/utils/auth";
import { onMounted, reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
import TypeTree from "../components/TypeTree.vue";
import AllocateDialog from "./components/AllocateDialog.vue";
import OrderDetail from "./components/OrderDetail.vue";
import UploadFile from "./components/UploadFile.vue";

const route = useRoute();

const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "company", label: "执行公司", minWidth: "140", showOverflowTooltip: true },
    { prop: "contact", label: "执行联络人", minWidth: "100", showOverflowTooltip: true },
    { prop: "phone", label: "执行联络人电话", minWidth: "120", showOverflowTooltip: true },
    { prop: "email", label: "执行联络人邮箱", minWidth: "120", showOverflowTooltip: true },
    { prop: "facName", label: "所处地块", minWidth: "120", showOverflowTooltip: true },
    { prop: "createTime", label: "任务创建时间", minWidth: "150", showOverflowTooltip: true },
    { prop: "startDate", label: "保养开始时间", minWidth: "150", showOverflowTooltip: true },
    { prop: "endDate", label: "保养结束时间", minWidth: "150", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  code: "", // 工单编号
  isShow: false,
  statusList: [],
  typeCode: "", // 设备类型code
  isView: false,
  isUploadShow: false,
  userInfo: {},
  facCodeList: []
});
const { queryParams, tableColumns, tableData, total, isShow, statusList, typeCode, isView, isUploadShow, code, userInfo, facCodeList } =
  toRefs(state);

const fontColorList = {
  1: "#F59E0B",
  2: "#3B82F6",
  3: "#10B981"
};

const tagBorderColorList = {
  1: "#FCE2B6",
  2: "#C6E2FF",
  3: "#B7EAD9"
};

const tagBgColorList = {
  1: "#FEF5E6",
  2: "#ECF5FF",
  3: "#E8F8F3"
};

watch(
  () => typeCode.value,
  (newVal, oldVal) => {
    if (newVal) {
      queryTable();
    }
  }
);

// 进入页面时触发
onMounted(async () => {
  const { taskCode } = route.query;
  if (taskCode) {
    code.value = taskCode;
    isView.value = true;
  }
  userInfo.value = JSON.parse(localStorage.getItem("userInfo"));
  statusList.value = await queryDictData({ typeCode: "ERC_MAINTAIN_TASK_STATUS" });
  facCodeList.value = await queryDictData({ typeCode: "ERC_FACTORY_AREA" });
  queryTable();
});
// 查询列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await queryOrderList({ ...params, typeCode: typeCode.value });
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

// 编辑
const handleEdit = (row: any) => {
  code.value = row.code;
  isUploadShow.value = true;
};
// 详情
const handleView = (row: any) => {
  isView.value = true;
  code.value = row.code;
};
// 派发
const handleAllocate = async (row: any) => {
  isShow.value = true;
  code.value = row.code;
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-flex-list.scss");
</style>
